---
type: tutorial
title: Escreva sua primeira postagem Markdown no blog
description: |-
  Tutorial: Construa seu primeiro blog Astro —
  Adicione páginas Markdown ao seu site
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro'
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

Agora que você construiu páginas utilizando arquivos `.astro`, é hora de fazer algumas postagens no blog utilizando arquivos `.md`!

<PreCheck>
  - Fazer uma nova pasta e criar uma nova postagem
  - Escrever algum conteúdo Markdown
  - Fazer links para suas postagens no blog em sua página Blog
</PreCheck>

## Crie seu primeiro arquivo `.md`

<Steps>
1. Crie um novo diretório em `src/pages/posts/`. 

2. Adicione um novo arquivo `post-1.md` (vazio) dentro da sua nova pasta `/posts/`.

3. Procure por essa página na prévia do seu navegador adicionando `/posts/post-1` ao fim da sua URL de prévia existente. (como `http://localhost:4321/posts/post-1`)

4. Modifique a URL de pré-visualização do navegador para ver `/posts/post-2` ao invés disso. (Essa é uma página que você ainda não criou.) 

    Note o resultado diferente em pré-visualizar uma página "vazia", e uma que não existe. Isso te ajudará a solucionar problemas no futuro.
</Steps>

## Escreva conteúdo Markdown

<Steps>
1. Copie ou digite o seguinte código em `post-1.md`

    ```markdown title="src/pages/posts/post-1.md"
    ---
    title: 'Minha Primeira Postagem no Blog'
    pubDate: 2022-07-01
    description: 'Esta é a primeira postagem do meu novo blog Astro.'
    author: 'Aluno de Astro'
    image:
        url: 'https://docs.astro.build/assets/rose.webp' 
        alt: 'Logo Astro em fundo escuro com brilho rosa.'
    tags: ["astro", "blogueirando", "aprendendo em público"]
    ---
    # Minha Primeira Postagem no Blog

    Publicado em: 2022-07-01

    Bem-vindo ao meu _novo blog_ sobre aprendendo Astro! Aqui, eu irei compartilhar minha jornada de aprendizado enquanto eu construo um novo website.

    ## O que eu realizei

    1. **Instalando Astro**: Primeiro, eu criei um novo projeto Astro e configurei minhas contas online.

    2. **Fazendo Páginas**: E então eu aprendi como fazer páginas criando novos arquivos `.astro` e os colocando na pasta `src/pages/`.

    3. **Fazendo Postagens no Blog**: Esta é minha primeira postagem no blog! Eu agora tenho páginas Astro e postagens em Markdown!

    ## O que vem a seguir

    Eu irei completar o tutorial do Astro, e então continuarei adicionando mais postagens. Olhe por aqui para o que vem a frente.
    ```

2. Verifique a pré-visualização do seu navegador novamente em `http://localhost:4321/posts/post-1`. Você deve agora ver conteúdo nessa página. O conteúdo pode não estar propriamente formatado, mas não se preocupe, você vai atualizar isso depois durante o tutorial!

3. Use as Ferramentas do Desenvolvedor do seu navegador para inspecionar nessa página. Perceba que apesar de você não ter digitado quaisquer elementos HTML, seu Markdown foi convertido para HTML. Você pode ver elementos assim como cabeçalhos, parágrafos e itens de listas.
</Steps>

:::note
A informação no topo do arquivo, dentro da cerca de código, é chamado de frontmatter. Esses dados—incluindo tags e uma imagem da postagem—são informação *sobre* sua postagem que o Astro pode utilizar. Eles não aparecem na página automaticamente, mas você irá posteriormente acessá-los no tutorial para aprimorar seu site. 
:::

## Faça links para suas postagens

<Steps>
1. Faça um link para sua primeira postagem com uma tag de âncora em `src/pages/blog.astro`:
    ```astro title="src/pages/blog.astro" ins={16-18}
    ---
    ---
    <html lang="pt-BR">
      <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
      </head>
      <body>
        <a href="/">Início</a>
        <a href="/about/">Sobre</a>
        <a href="/blog/">Blog</a>

        <h1>Meu Blog de Aprendizado sobre Astro</h1>
        <p>Aqui é onde postarei sobre minha jornada aprendendo Astro.</p>
        <ul>
          <li><a href="/posts/post-1/">Postagem 1</a></li>
        </ul>
      </body>
    </html>
    ```

2. Agora, adicione mais dois arquivos em `src/pages/posts/`: `post-2.md` e `post-3.md`. Aqui está um código de exemplo que você pode copiar e colar em seus arquivos, ou, você pode criar o seu próprio!

    ```md title="src/pages/posts/post-2.md"
    ---
    title: Minha Segunda Postagem no Blog
    author: Aluno de Astro
    description: "Após aprender um pouco sobre Astro, eu não consegui parar!"
    image: 
        url: "https://docs.astro.build/assets/arc.webp"
        alt: "Logo Astro em fundo escuro com arco degradê roxo."
    pubDate: 2022-07-08
    tags: ["astro", "blogueirando", "aprendendo em público", "sucessos"]
    ---
    Após uma primeira semana de sucesso aprendendo Astro, eu decidi tentar um pouco mais. Eu escrevi e importei um pequeno componente da memória!
    ```

    ```md title="src/pages/posts/post-3.md"
    ---
    title: Minha Terceira Postagem no Blog
    author: Aluno de Astro
    description: "Eu tive alguns desafios, mas perguntar na comunidade realmente me ajudou!"
    image: 
        url: "https://docs.astro.build/assets/rays.webp"
        alt: "Logo Astro em fundo escuro com raios arco-íris."
    pubDate: 2022-07-15
    tags: ["astro", "aprendendo em público", "contratempos", "comunidade"]
    ---
    Nem tudo está sendo fácil, mas estou gostando de construir com Astro. E a [comunidade no Discord](https://astro.build/chat) é realmente amigável e cooperativa!
    ```

3. Adicione links para essas novas postagens:

    ```astro title="src/pages/blog.astro" ins={18-19}
    ---
    ---
    <html lang="pt-BR">
      <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
      </head>
      <body>
        <a href="/">Início</a>
        <a href="/sobre/">Sobre</a>
        <a href="/blog/">Blog</a>

        <h1>Meu Blog de Aprendizado sobre Astro</h1>
        <p>Aqui é onde postarei sobre minha jornada aprendendo Astro.</p>
        <ul>
          <li><a href="/posts/post-1/">Postagem 1</a></li>
          <li><a href="/posts/post-2/">Postagem 2</a></li>
          <li><a href="/posts/post-3/">Postagem 3</a></li>
        </ul>
      </body>
    </html>
    ```

4. Verifique a pré-visualização no seu navegador e certifique-se de que:

    - Todos os seus links para a Postagem 1, Postagem 2 e Postagem 3 levam a uma página funcional no seu site. (Se você encontrou um erro, verifique seus links em `blog.astro` ou no nome de seus arquivos Markdown.)
</Steps>


<Box icon="question-mark">
### Teste seu conhecimento

1. Conteúdo em um arquivo Markdown (`.md`) é convertido para:
    <MultipleChoice>
        <Option isCorrect>HTML</Option>
        <Option>CSS</Option>
        <Option>JavaScript</Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">
## Checklist

<Checklist>
- [ ] Eu posso criar uma nova pasta em `src/pages/` para minhas postagens no blog.
- [ ] Eu posso criar um novo arquivo Markdown (`.md`) para minha postagem no blog.
- [ ] Eu entendo que Markdown é outra linguagem que, como Astro, produz HTML no meu navegador.
</Checklist>
</Box>

### Recursos

- [Cheat Sheet de Markdown pelo The Markdown Guide](https://www.markdownguide.org/cheat-sheet/)  <Badge class="neutral-badge" text="externo" />

- [O que são as ferramentas de desenvolvimento do navegador? MDN](https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)  <Badge class="neutral-badge" text="externo" />

- [Frontmatter YAML](https://assemble.io/docs/YAML-front-matter.html)  <Badge class="neutral-badge" text="externo" />
